<template>
  <view>
    <view class="balance">
      <view class="balanceYuan">余额 (元)</view>
      <view class="balancemaney"> {{ mer_money }}</view>
    </view>
    <view class="balance">
      <view class="balanceYuan">专用账户余额 (元)</view>
      <view class="balancemaney"> {{ special_money }}</view>
    </view>
    <view class="balanceBottom">
      <view class="moeyhtbox" @click="withdraw">
        <view class="advance"
          ><image src="../../../static/images/advance.png"></image
        ></view>
        <view class="moeyht">提现</view>
      </view>
      <view class="moeyhtbox" @click="viewList">
        <view class="advance"
          ><image src="../../../static/images/balance.png"></image
        ></view>
        <view class="moeyht">余额明细</view>
      </view>
      <!-- <view class="moeyhtbox" @click="editMerInfoDIalog = true">
        <view class="advance"
          ><image src="../../../static/images/Alipay.png"></image
        ></view>
        <view class="moeyht">账号信息</view>
      </view> -->
      <view class="moeyhtbox" @click="editMerInfoDIalog = true">
        <view class="advance"
          ><image src="../../../static/images/Alipay.png"></image
        ></view>
        <view class="moeyht">账号信息</view>
      </view>
    </view>
    <!-- <u-cell-group>
			<u-cell-item icon="setting-fill" title="用户姓名" :value="mer_info.name" :arrow="true"
				@click="editMerInfoDIalog = true"></u-cell-item>
			<u-cell-item icon="integral-fill" title="账户名" :value="mer_info.alipay" :arrow="true"
				@click="editMerInfoDIalog = true"></u-cell-item>
			<u-cell-item icon="integral-fill" :title="'账户余额:'+mer_money" value="去提现"
				@click="withdrawalDIalog = true"></u-cell-item>
			<u-cell-item icon="integral-fill" title="提现记录" @click="viewList"></u-cell-item>
		</u-cell-group> -->
    <view class="phone">客服电话 : 17640158911</view>
    <u-popup
      v-model="editMerInfoDIalog"
      mode="center"
      border-radius="14"
      width="80%"
    >
      <u-form label-width="150" style="padding: 30rpx">
        <u-form-item label="账号姓名">
          <u-input v-model="mer_info.name" />
        </u-form-item>
        <u-form-item label="支付宝账号">
          <u-input v-model="mer_info.alipay" />
        </u-form-item>
        <u-button type="primary" @click="editMerInfo">保存</u-button>
      </u-form>
    </u-popup>
    <u-popup
      v-model="withdrawalDIalog"
      mode="center"
      border-radius="14"
      width="80%"
    >
      <u-form label-width="150" style="padding: 30rpx">
        <u-form-item label="提现金额">
          <u-input
            v-model="price"
            :placeholder="'可提现金额为' + mer_money + '元'"
          />
        </u-form-item>
        <u-button type="primary" @click="submit">申请提现</u-button>
      </u-form>
    </u-popup>
  </view>
</template>

<script>
import {
  withdrawalApi,
  getmerchantApi,
  getmerchantAccountApi,
  updateAccountApi,
} from "@/api/product";
export default {
  data() {
    return {
      price: "",
      merId: "",
      mer_money: 0,
      special_money: 0,
      mer_info: {
        name: "",
        alipay: "",
      },
      editMerInfoDIalog: false,
      withdrawalDIalog: false,
    };
  },
  onLoad(options) {
    this.merId = options.mer_id;
    this.getmerchant();
    this.getAccount();
  },
  methods: {
    viewList() {
      uni.navigateTo({
        url: "/pages/product/withdrawlList/withdrawlList?mer_id=" + this.merId,
      });
    },
    withdraw() {
      console.log("1");
      uni.navigateTo({
        url: "/pages/product/withdraw/withdraw?mer_id=" + this.merId,
      });
    },
    submit() {
      const params = {
        price: this.price,
      };
      withdrawalApi(params, this.merId).then((res) => {
        this.withdrawalDIalog = false;
        this.getmerchant();
        this.$util.Tips({
          title: "提交成功",
        });
        this.price = "";
      });
    },
    editMerInfo() {
      const params = {
        name: this.mer_info.name,
        alipay: this.mer_info.alipay,
      };
      updateAccountApi(params, this.merId).then((res) => {
        this.editMerInfoDIalog = false;
        this.getAccount();
        this.$util.Tips({
          title: "编辑成功",
        });
      });
    },
    getmerchant() {
      getmerchantApi(this.merId).then((res) => {
        this.mer_money = res.data.mer_money;
        this.special_money = res.data.special_money;
        console.log(this.mer_money);
      });
    },
    getAccount() {
      getmerchantAccountApi(this.merId).then((res) => {
        this.mer_info = res.data;
        console.log(this.mer_info);
      });
    },
  },
};
</script>

<style lang="scss">
.balance {
  margin: 0 auto;
  margin-top: 20rpx;
  padding: 20rpx;
  height: 250rpx;
  line-height: 100rpx;
  border-radius: 10rpx;
  color: #fff;
  width: 93%;
  background: #fc9c56;
  .balanceYuan {
    font-size: 48rpx;
    font-weight: bold;
  }
  .balancemaney {
    font-size: 34rpx;
  }
}
.advance {
  padding: 10rpx 20rpx;
  width: 146rpx;
  height: 126rpx;
  image {
    width: 100%;
    height: 100%;
  }
}
.moeyht {
  margin: 0 auto;
  text-align: center;
}
.balanceBottom {
  margin: 30rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  background: #fff;
  display: flex;
  justify-content: space-between;
}
.phone {
  bottom: 150rpx;
  text-align: center;
  width: 450rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #fc9c56;
  margin: 300rpx auto 0 auto;
  color: #fff;
  border-radius: 10rpx;
}
</style>